import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Select, Space } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { purposeQuerySelected } from '@/apis/advert';
import { history } from "umi"
import build from '../advert/build';

const statusOptions = [
  {
    value: 'ALL',
    label: '全部(不含已删除)',
  },
  // {
  //   value: 'normal',
  //   label: '正常'
  // },
  {
    value: 'PENDING',
    label: '待投放',
  },
  {
    value: 'PUTTING',
    label: '投放中',
  },
  {
    value: 'SUSPENDED',
    label: '被暂停',
  },
  {
    value: 'END',
    label: '已结束',
  },
  {
    value: '2', // 0 是正常 2 是已删除
    label: '已删除',
  },
];

interface Purpose {
  label: string;
  value: string;
}

const typeMap: any = {
  plan: '计划',
  advert: '广告',
  creative: '创意',
};

export default function sift(props: any) {
  const { tabtype } = props
  
  
  const [form] = Form.useForm();
  const [, forceUpdate] = useState({});
  // 目的
  const [purpose, setpurpose] = useState<any[] | Purpose[]>([]);
  
  const type = typeMap[tabtype];
  
  useEffect(() => {
    console.log('props: ', props);
    // 计划列表
    purposeQuerySelected().then((res: Purpose[]) => {
      setpurpose(res);
    });
    forceUpdate({});
  }, []);

  const onFinish = (values: any) => {
    console.log('Finish:', values);
  };

  const onReset = () => {
    form.resetFields();
  };


  const build = ()=>{
    switch (tabtype) {
      case "advert":
        history.push({ pathname:'/advert/buildAdvert',})
        break;
    
      default:
        break;
    }
  }

  return (
    <div>
      <Form
        form={form}
        name="horizontal_login"
        layout="inline"
        initialValues={{
          purpors: 'ALL',
          status: 'ALL',
        }}
        onFinish={onFinish}
      >
        <Form.Item name="purpors" rules={[{ required: true, message: 'Please input your username!' }]}>
          <Select placeholder="请输入目的" style={{ width: 200 }}>
            {purpose.map((item: Purpose) => {
              return (
                <Select.Option key={item.value} value={item.value}>
                  {item.label}
                </Select.Option>
              );
            })}
          </Select>
        </Form.Item>
        {/* 状态 */}
        <Form.Item name="status" rules={[{ required: true, message: 'Please input your username!' }]}>
          <Select placeholder="请输入状态" style={{ width: 200 }}>
            {statusOptions.map((item: Purpose) => {
              return (
                <Select.Option key={item.value} value={item.value}>
                  {item.label}
                </Select.Option>
              );
            })}
          </Select>
        </Form.Item>
        <Form.Item name="password" rules={[{ required: true, message: 'Please input your password!' }]}>
          <Input prefix={<LockOutlined className="site-form-item-icon" />} type="password" placeholder="Password" />
        </Form.Item>
        <Form.Item>
          <Space>
            <Button type="primary" htmlType="submit">
              搜索
            </Button>
            <Button type="primary" htmlType="button" onClick={onReset}>
              重置
            </Button>
          </Space>
        </Form.Item>
        <Form.Item>
          <Button type="primary"  onClick={build} >
            {`新建${type}`}
          </Button>
        </Form.Item>
      </Form>
      {props.children}
    </div>
  );
}
